<template>
  <el-scrollbar class="scrollbar">
    <div class="shop-tree">
      <div class="tree">
        <!-- <el-tree
          class="f"
          ref="tree"
          :expand-on-click-node="false"
          :props="props"
          :data="treeData"
          node-key="id"
          :default-expanded-keys="expandedList"
          @node-expand="handleNodeClick"
        > -->
        <el-tree
          class="f"
          ref="tree"
          :expand-on-click-node="false"
          :props="props"
          :load="loadNode"
          lazy
          node-key="id"
          :default-expanded-keys="expandedList"
          @node-click="handleNodeClick"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <div class="btns">
              <span v-if="checkAuthority('/building/editor')" class="del-btn" @click="editHandle(data)"><i class="el-icon-edit"></i></span>
              <span v-if="checkAuthority('/building/delete')" class="del-btn" @click="delHandle(node,data)"><i class="el-icon-delete"></i></span>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
import { getListByTag, deleteFloorById } from '@/views/children/safety/js/device'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  data () {
    return {
      treeData: [],
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      checkIds: [],
      node: {},
      resolve: ''
    }
  },
  props: {
    expandedList: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  watch: {
    expandedList (val) {
      if (val.length) {
        this.node.childNodes = []
        this.loadNode(this.node, this.resolve)
      }
    }
  },
  methods: {
    checkAuthority,
    // node点击
    handleNodeClick (data) {
      this.$emit('deviceClick', data, 2)
    },
    // 懒加载函数
    loadNode (node, resolve) {
      let id = node.level === 0 ? 0 : node.key
      if (node.level === 0) {
        this.node = node
        this.resolve = resolve
      }
      this.getListByTag(id, node.level + 1).then(res => {
        if (node.level === 2) {
          this.getListByTag(id, node.level + 2).then(res1 => {
            return resolve([...res, ...res1])
          })
        } else {
          return resolve(res)
        }
      })
    },

    // 获取楼层信息
    async getListByTag (parentId = 0, tag = 1) {
      const params = {
        parentId,
        tag
        // tenantNo: localStorage.getItem('tenantNo')
      }
      const { data } = await getListByTag(params)
      data.forEach(e => {
        if (e.tag === 3 || e.tag === 4) {
          e.leaf = true
        }
        //  else {
        //   e.leaf = false
        // }
      })
      return data
    },

    // 编辑 1: 编辑  2: 查看
    editHandle (data) {
      this.$emit('deviceClick', data, 1)
    },

    // 删除
    delHandle (node, data) {
      let params = {
        floorId: data.id,
        tag: data.tag
      }
      this.$confirm('确定删除该楼层信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          let res = await deleteFloorById(params)
          if (res.code === 0) {
            this.$message.success('删除成功')
            // this.
            this.node.childNodes = []
            this.loadNode(this.node, this.resolve)
          } else {
            this.$message.error(res.msg)
          }
        } catch (e) {}
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.scrollbar {
  height: 100%;
  >>> .el-scrollbar__wrap {
    // overflow-x: hidden;
    margin-bottom: 0px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .del-btn {
    display: inline-block;
    // padding: 0 10px;
  }
  .el-icon-edit {
    display: none;
    // margin-left:  110px;
  }
  .el-icon-delete {
    display: none;
  }
}
.btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 40px;
}
.el-tree-node__content:hover .el-icon-edit {
  display: inline-block;
}
.el-tree-node__content:hover .el-icon-delete {
  display: inline-block;
}
</style>
